<template>
  <div id="mapContainer">
      <!-- 拖拽标注点 -->
    <div id="marker_getOn" v-show="getOnShow" :class="{active:getOnActive}">
      <img src="../../assets/img/marker_getOn1.png" alt="">
    </div>
        <!-- 回到起点 -->
    <div id="gotoMyPos"
      @click="gotoMyPos"><i class="iconfont icon-iconfontcolor43"></i></div>
  </div>

</template>

<script>
  let myMarker = null;
  let marker_getON = null;
  let curDriverMarker = null;
  let polylineDtoStart = null;
  let driverNearbyMakerList = [];
  let timerCurDriver = null;
  // let map = null;
  // let geolocation = new qq.maps.Geolocation("KU2BZ-MJRK4-SIHUZ-XMEU6-4VJPJ-SIFOY", "dejingtaxi");
  import {map,initMap,myPos,watchMyPos,addMarker,
          moveMarker,addCircleShadow,mapDrag,
          gotoPos,addTrack} from '@s/map.js'
  import {mapGetters} from 'vuex'
  import {direction,getCurDriverPos,getDriverNearby} from '@/http'
  export default {
    name: 'qqMap',
    data () {
      return {
        getOnActive:false,
        getOnShow:true
      }
    },
    computed:{
      ...mapGetters(['marker','myPos','startPos','curOrder'])
    },
    methods:{
      gotoMyPos(){
        gotoPos(this.myPos.lat,this.myPos.lng,marker_getON)
      },
      //计算司机到起点的位置、划出轨迹
      addDriverTrack(){
        let from=`${this.curOrder.cur_latitude},${this.curOrder.cur_longitude}`;
        let to=`${this.startPos.latLng.lat},${this.startPos.latLng.lng}`;
        direction({from,to}).then((data)=>{

          // 添加轨迹
          let latLngArr = data.result.routes[0].polyline;
          for (let i = 2; i < latLngArr.length ; i++){  //解压polyline
              latLngArr[i] = latLngArr[i-2] + latLngArr[i]/1000000
          }
          polylineDtoStart = addTrack(latLngArr,'#00cc99')
        })

      },
      // 实时获取当前司机的位置
      getCurDriverPos(){
        getCurDriverPos(this.curOrder.id).then((data)=>{


            if(!curDriverMarker){
                
                addMarker({
                  lat:data.data.cur_latitude,
                  lng:data.data.cur_longitude,
                  icon:this.marker.fastCar,
                  animation:null,
                  scaleSize:[30,30],
                  anchor:[15,30]
                }).then((marker)=>{
                  curDriverMarker = marker
                })
            }else{
              moveMarker({
                marker:curDriverMarker,
                latLng:{lat:data.data.cur_latitude,lng:data.data.cur_longitude},
                speed:100
              })
            }
        })
      }
    },
    watch:{
      curOrder(newVal,oldVal){
        /*订单状态：
              0已取消 1待接单 2已接单 3已接客 4已到达起点 5待支付 6已支付 
              7乘客已评价 8司机取消订单 9线上支付 10司机已评价 11已到达终点 12预约等待
            */
        if(newVal.status == oldVal.status) return

          if(newVal.status=='1'){ //1待接单

            //清除getOn_marker
            this.getOnShow = false;

          }else if(newVal.status=='2'){  //2已接单

            //清除附近的司机
            driverNearbyMakerList.forEach((driver)=>{
                driver.setMap(null)
            })

            //清除用户的图标
            myMarker.setMap(null);

            //清除起点和终点的图标


            //添加司机到起点的轨迹
            this.addDriverTrack()

            //循环获取当前司机的位置
            timerCurDriver = setInterval(()=>{
              this.getCurDriverPos()
            },5000)

          }else if(newVal.status=='3'){  //3已接客
              clearInterval(timerCurDriver)
              // 清除轨迹
             polylineDtoStart.setMap(null);
             //清除用户marker
             myMarker.setMap(null);
          }else if(newVal.status=='4'){  //4已到达起点
            
            // 
          }else if(newVal.status=='5'){  //待支付

            curDriverMarker.setMap(null);
          }else{

            // 显示getOn_marker
            this.getOnShow = true;
          }
      }
    },
    mounted(){
      // 初始化地图
      initMap('mapContainer')
      //定位
      myPos().then((position)=>{
        //切换城市
        this.$store.dispatch('switchCity',position.city.replace('市',''))

        // 添加用户定位marker
        addMarker({
          lat:position.lat,
          lng:position.lng,
          icon:this.marker.user.img,
          scaleSize:[28,28],
          anchor:[28,14]
        }).then((marker)=>{myMarker = marker})
        // 添加默认起点
        this.$store.dispatch('location',{type:'startPos',pos:position})

        // 添加地图中心指示图标
        let marker_getOn_el = document.getElementById('marker_getOn');
        // 移动地图动态更改起点位置
        mapDrag(marker_getOn_el,(isActive,pos)=>{
          this.getOnActive = isActive;
          if(pos){
            this.$store.dispatch('location',{type:'startPos',pos})
          }
        })

        //获取附近的司机
        getDriverNearby({
            longitude:position.lng,
            latitude:position.lat
          }).then((data)=>{
            let drivers = data.data;
            //循环添加附近司机
            for(let i=0;i<drivers.length;i++){
                addMarker({
                  lat:drivers[i].line[0].lat,
                  lng:drivers[i].line[0].lng,
                  icon:this.marker.fastCar.img,
                  scaleSize:[30,30],
                  anchor:[15,30]
                }).then((marker)=>{
                  driverNearbyMakerList.push(marker);
                  moveMarker({
                    marker,
                    latLng:drivers[i].line.map((latLng)=>{
                      return {
                        lat:latLng.latitude,
                        lng:latLng.longitude
                      }
                    }),
                    speed:100
                  })
                })

            }
        })

        this.$store.dispatch('location',{type:'myPos',pos:position})
      }).catch(error => {console.log(error)})


    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

    @keyframes markerGetOn{
      0% {transform: translate3d(-50%,-145%,0)}
      25% {transform: translate3d(-50%,-95%,0)}
      50% {transform: translate3d(-50%,-115%,0)}
      75% {transform: translate3d(-50%,-95%,0)}
      90% {transform: translate3d(-50%,-105%,0)}
      100% {transform: translate3d(-50%,-95%,0)}
    }
  #mapContainer{
    width:100%;
    height:100%;
  }

  #marker_getOn{
        position: fixed;
        top:50%;
        left:50%;
        z-index: 999;
        transform: translate3d(-50%,-95%,0);
        width:90px;
        height:90px;
        img{width:100%;}
        &.active{
          animation: markerGetOn .5s linear;
        }
    }

    #gotoMyPos{
      position: fixed;
      right:50px;
      bottom:20%;
      z-index: 999;
      background:#fff;
      border-radius: 10px;
      text-align: center;
      width:90px;
      height:90px;
      line-height: 90px;
      color:lighten(#2c2c2c,30%);
      .iconfont{font-size: 24px}
    }

</style>
